import React, { memo, useEffect, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getNewAluAction } from "../../store/actionCreatorgs";

import Title from "@/components/theme-header-rcm";
import ImgCover from "@/components/album-cover";
import { Carousel } from "antd";
import { AlbumWrapper } from "./style";

export default memo(function () {
  // hooks
  const dispatch = useDispatch();
  const { newAlbum } = useSelector(
    (state) => ({
      newAlbum: state.getIn(["recommend", "newAlbum"]),
    }),
    shallowEqual
  );
  // change state
  useEffect(() => {
    dispatch(getNewAluAction(10, 8));
  }, [dispatch]);

  //  ref
  const CarouselRef = useRef();

  return (
    <div>
      <Title title="新碟上架" />
      <AlbumWrapper>
        <div className="content">
          <div
            className="arrow arrow-left sprite_02"
            onClick={(e) => CarouselRef.current.prev()}
          ></div>
          <div className="album">
            <Carousel dots={false} ref={CarouselRef}>
              {[0, 1].map((item, index) => {
                return (
                  <div key={index} className="page">
                    {newAlbum.slice(item * 5, (item + 1) * 5).map((v) => {
                      return <ImgCover key={v.id} info={v} />;
                    })}
                  </div>
                );
              })}
            </Carousel>
          </div>
          <div
            className="arrow arrow-right sprite_02"
            onClick={(e) => CarouselRef.current.next()}
          ></div>
        </div>
      </AlbumWrapper>
    </div>
  );
});
